<template>
  <el-container class="home">
    <PageAside></PageAside>
    <el-container>
      <el-header height="50px" class="page-header">
        <PageHeader></PageHeader>
      </el-header>
      <!-- <el-breadcrumb separator-class="el-icon-arrow-right" class="global-breadcrumb">
        <el-breadcrumb-item
          v-for="item in $route.meta"
          :key="item.name"
          :to="item.path"
        >{{item.title}}</el-breadcrumb-item>
      </el-breadcrumb> -->
       <tags-view />

      <el-main>
        <section class="app-main">
          <transition name="el-fade-in-linear" mode="out-in">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </transition>
        </section>

       
        <!-- </transition> -->
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
// @ is an alias to /src
import PageHeader from "@/components/global/PageHeader.vue";
import PageAside from "@/components/global/PageAside.vue";
import TagsView from "@/components/TagsView";

export default {
  name: "Home",
  components: {  PageHeader, PageAside, TagsView }
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.el-main{
  margin-top: 10px;
}
.home {
  height: 100%;
  overflow: hidden;
  background-color: @color-border-extralight;
  .page-header {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 2;
    background-color: #fff;
    padding: 0 15px;
  }
  .global-breadcrumb {
    padding: 10px 15px;
    margin-bottom: 15px;
    background-color: fade(@color-primary, 5%);
  }
  .el-main {
    padding: 0 15px 15px;
  }
}
</style>
